<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>活动列表</title>
    <link href="../lib/css/font-awesome-4.5.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="../css/reset.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">
    <script src="../lib/angular-1.3.0/angular.js"></script>
    <script type="text/javascript">
    var app = angular.module("app", []);
    app.controller("activityListCtrl", function($scope) {
        this.data = {
            isDown: false,
            queryInfo: {
                isDateOrder: false,
                isShowHighSearch: false,
                isShowTable: false
            },
            list: [{
                id: 1,
                field1: "2017-02-03"
            }, {
                id: 2
            }, {
                id: 33
            }]
        };
        this.method = {
            goDetail: function(value) {
                window.location.href = "activityDetail.html";
            },
            goEdit: function(value) {
                window.location.href = "activityRegister.html";
            },
            del: function($index) {
                this.data.list.splice($index, 1);
            }.bind(this),
        };
    });
    </script>
</head>

<body ng-app="app" ng-controller="activityListCtrl as vm">
    <div class="main">
        <div class="main-header">
            <div class="pa-icon-div pull-left" style="color:black">
                <i class="fa fa-home"></i>
                <span>内页>安全活动><span style="color:#008bdd">安全活动列表</span></span>
            </div>
            <div class="pa-icon-div pull-right">
                <i class="fa fa-reply-all"></i>
                <span>返回</span>
            </div>
        </div>
        <div class="main-content">
            <form class="base-info">
                <div class="query-info">
                    <div class="first-search">
                        <div class="input-group">
                            <input type="text" class="search-combobox-input" placeholder="活动名称">
                            <span class="input-group-btn">
              <i class="fa fa-search icon-search"></i>
         </span>
                        </div>
                        <div class="pa-operate">
                            <i class="fa fa-refresh"></i>
                            <span>刷新</span>
                        </div>
                        <div class="pa-act-register" ng-click="vm.data.isDown=!vm.data.isDown">
                            <i class="fa fa-edit"></i>
                            <span>活动登记</span>
                            <i class="fa" ng-class="{'fa-chevron-down':vm.data.isDown,'fa-chevron-up':!vm.data.isDown}"></i>
                            <div ng-show="vm.data.isDown" style="background-color: white;border: 1px solid #ddd;position: absolute; box-shadow: 3px 3px 3px #ddd;">
                                <p><a href="activityRegister.html">安全技术培训</a></p>
                                <p><a href="activityRegister.html">安全技术交底</a></p>
                                <p><a href="activityRegister.html">安全会议</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="pa-table-container">
                <table class="pa-table">
                    <thead>
                        <tr>
                            <th class="sort-operate">
                                <span>日期</span>
                                <div class="time-sequence-btn">
                                    <div class="time-sequence-box" ng-class="{'active':data.queryInfo.isDateOrder}" ng-click="data.queryInfo.isDateOrder=!data.queryInfo.isDateOrder">
                                        <i class="fa fa-caret-up sort-size sort-size-big"></i>
                                    </div>
                                    <div class="time-sequence-box" ng-class="{'active':!data.queryInfo.isDateOrder}" ng-click="data.queryInfo.isDateOrder=!data.queryInfo.isDateOrder">
                                        <i class="fa fa-caret-down sort-size sort-size-small"></i>
                                    </div>
                                </div>
                            </th>
                            <th>类型</th>
                            <th>活动名称</th>
                            <th>主讲人</th>
                            <th>部门</th>
                            <th>特种作业</th>
                            <th>状态</th>
                            <th class="operate-three">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="value in vm.data.list">
                            <td>{{value.field1||'-'}}</td>
                            <td>{{value.field2||'-'}}</td>
                            <td>{{value.field3||'-'}}</td>
                            <td>{{value.field4||'-'}}</td>
                            <td>{{value.field5||'-'}}</td>
                            <td>{{value.field6||'-'}}</td>
                            <td>{{value.field7||'-'}}</td>
                            <td>
                                <div class="operate-del" ng-click="vm.method.goDetail(value)">
                                    <i class="fa fa-pencil detail-color"></i>
                                    <span>详情</span>
                                </div>
                                <div class="operate-del" ng-click="vm.method.goEdit(value)">
                                    <i class="fa fa-pencil edit-color"></i>
                                    <span>编辑</span>
                                </div>
                                <div class="operate-del" ng-click="vm.method.del($index)">
                                    <i class="fa fa-trash trash-color"></i>
                                    <span>删除</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

</html>
<style type="text/css">
.main {
    min-height: 100%;
    padding: 0 20px;
    background-color: #e8eff7;
    margin-top: 60px;
    position: relative;
}

.main-header {
    height: 32px;
    line-height: 32px;
    padding: 15px;
}

.main-content {
    padding: 10px;
    -webkit-box-shadow: 0 0 10px #d6dce3;
    -moz-box-shadow: 0 0 10px #d6dce3;
    box-shadow: 0 0 10px #d6dce3;
}

.query-info {
    font-size: 0;
    margin: 0 !important;
}

.search-combobox-input {
    padding: 0 5px;
}

.pa-act-register {
    float: right;
    margin-left: 20px;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #008bdd;
    cursor: pointer;
}

.pa-act-register p {
    margin: 0;
    color: #666;
    background-color: white;
}

.pa-act-register p a {
    color: #666;
    text-decoration: none;
    padding: 5px 10px;
    width: 100%;
}

.pa-act-register p a:hover {
    color: #008bdd;
}

.pa-icon-div {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #008bdd;
    cursor: pointer;
}

.pa-table-container {
    margin: 0;
    padding-bottom: 10px;
}

.time-sequence-box i {
    color: #ddd;
}

.time-sequence-box.active i {
    color: black;
}

.padding {
    padding: 5px;
}

.main-footer {
    margin-top: 10px;
}
</style>
